未経験デザイナーがCocoda!で基礎トレーニングを制覇したら身についたこと

kubo

2021.12.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイン勉強中のアシスタントデザイナー、秋田です！

UI設計って何・・・？

からスタートした私。

そんな私に先輩デザイナーが教えてくれたのが【Cocoda!】です。

Cocoda!って何？

Cocoda!とは、モバイルアプリやWebサイトなどのUI設計を実践的に学べる無料の学習サービスです。

Cocoda!には大きく2つ、【基礎トレーニング】と【Daily Cocoda!】というお題があります。Daily Cocoda!は比較的ツールの操作や、UI設計に慣れている中級者以上向けかなと思います。

本記事では、私の取り組んだ【基礎トレーニング】についてご紹介をします！

基礎トレーニング

その名の通り、初心者向けのお題。今回私が取り組んだものです！

デザインのポイントが丁寧に記載されていたり、色やサイズ、パーツの配置位置など細かいビジュアルの指定もあるため、設計力・ビジュアルの表現力を身につけていくことができます。

Cocoda!の基礎トレーニングのデザインカリキュラムは全部で7つ。

はじめてのデザイン
UIデザインをはじめよう
デザイン4原則
レイアウト
ガイドライン
マイクロインタラクション
情報設計

（一つのカリキュラムごとに各3,4章程お題があるので、数えたところ全部で21点作成します）

こちらが実際に作成したものです！

「UIデザイナーになりたいけれど、何から始めたらいいのかわからない」という初心者の方に特におすすめです！簡単なところからスタートし徐々に難易度が上がっていくため、無理なく進められます！

作成の流れ

作成の流れを一つ、具体的にご紹介します。

左側の【基礎から学べる】を選択したページです。（Cocoda!ページをスクショして引用しています。）

カリキュラムは左上から順番に進めていくの良いと思います！

こちらは【まずはここから！はじめてのデザイン】ページです。

一番最初は名刺の作成からスタート！

ステップごとに、作成手順やポイントを丁寧に教えてくれます。また、動画での説明もついていてとてもわかりやすいです。

こちらはsketchでの実際の制作画面です！Cocoda!の手順に沿って、作成しました。

Cocoda!サイトと、デザインツールを行ったり来たりしながら制作を進めます。

基礎トレーニングで学んだ３つのこと

①UIデザインツールの基本操作

Sketch
XD
Figma

これらはUIをデザインをする上で主に使われているツールです。

Cocoda!トレーニングで使用する素材のダウンロードはXDファイルです。クラスメソッドではSketchを使用することが多いので私はSketchでの制作をしました！

Cocoda!の基礎トレーニングは、色やサイズなど細かいビジュアルの指定があるため、自然とツールを隅々まで触ることになります。作成を進めるうちに基本操作は習得できました！

②UI設計のポイント

余白の取り方
必ず4原則を意識する
デザインは情報解決の手段
ユーザー視点、ユーザーが迷わない設計の重要性
情報のまとまりを意識し、統一させること

もちろんこれが全てではありませんが、未経験の私には多くの学びでした。

③実案件で必要となる具体的な留意点

画面内で同じ振る舞いをする部品は空白やサイズを統一する（実装するエンジニアが迷わないよう）
ガイドラインを意識してデザインする（iOS、Androidそれぞれのガイドラインに沿う）
小数点を極力出さない（見た目にぼやけるのと、小数点数値はプログラマが困る）
アイコンはベクターを使用すること（.svgだと数値の変更で色や形をエンジニアさん側で変更が可能で、柔軟な対応ができる）

上記は、Cocoda!の基礎トレーニングには表記ありません。基礎トレーニングでの取り組みを通して先輩デザイナーから頂いたフィードバックです。

Cocoda!の基礎トレーニングを通して実践で生きる具体的な学びにも繋がりました。

Cocoda!の素晴らしいところ

お題、素材が用意されている点

未経験だと何から始めていいのかそもそも分からなくて腰が重いですよね。Cocoda!は作成するものが決まっていて素材も用意されているものを使用するので、気軽に始められます！基礎トレーニングは、一から自分で考えるというよりも、ツールの使い方に慣れたり形を整えたりと、初歩な部分に集中して取り組むことができました。また、お手本となるXDファイルが用意されているため、わからない時はそちらを確認することもできます！